<template>
  <div v-if="loadingFlag" class="AgentDetailLoading">
    <van-loading class="loading-box" type="spinner" color="#fe6018" vertical>加载中</van-loading>
  </div>
  <div v-else class="container">
    <van-pull-refresh class="agent-refresh" v-model="isRefresh" @refresh="onRefresh">
      <div class="header">
        <div class="status">
          <p v-if="orderData.start_status==2">代理中</p>
          <p v-else-if="orderData.start_status==1">
            <img src="../assets/me/audit.png" alt="#" />审核中
          </p>
          <p v-else-if="orderData.start_status==3">
            <img src="../assets/me/ok.png" alt="#" />已结束
          </p>
          <p v-else>已取消</p>
        </div>
        <div class="time-code">
          <p>
            <span>订单编号：</span>
            <span>{{agentDetail.order_number}}</span>
          </p>

          <p>
            <span>代理时间：</span>

            <span>{{agentDetail.agent_time | parseTime}}</span>
          </p>

          <p class="contract-p">
            <span
              class="btn"
              :class="{'no-btn':!agentDetail.contract_id}"
              @click="_previewContract()"
            >
              查看合同
              <van-icon class="icon" name="arrow" />
            </span>
          </p>
        </div>
      </div>
      <div class="stores-info">
        <div class="item">
          <div class="item-nav padding">
            <div class="title">
              <img v-if="orderData.store_type == 1" src="@/assets/me/monopoly.png" alt="#" />
              <img v-else-if="orderData.store_type == 2" src="@/assets/me/flagship.png" alt="#" />
              <span>{{orderData.store_name}}</span>
            </div>
          </div>
          <div class="item-content">
            <div class="image">
              <img :src="orderData.product_img" alt="#" />
              <div v-show="!orderData.is_deposit" class="mask">
                <img v-show="orderData.is_password" src="@/assets/me/lock.png" alt="#" />
                <p>订金</p>
              </div>
            </div>
            <div class="info">
              <div class="title">
                <span v-show="orderData.product_area">{{orderData.product_area}}</span>
                {{orderData.product_name}}
                {{orderData.product_place}}
              </div>
              <div class="agent-num">
                代理份数:
                {{agentDetail.copies ? agentDetail.copies + '份' : '-'}}
              </div>
              <div class="detail">
                <div class="detail-item">
                  <p>代理费率</p>
                  <p>{{orderData.agent_rate ? (orderData.agent_rate*100).toFixed(4) + '%' : '-'}}</p>
                </div>
                <div class="inline"></div>
                <div class="detail-item">
                  <p>代理期限</p>
                  <p
                    v-if="agentDetail.payment_mode == 'FLEXIBLE'"
                  >{{agentDetail.agent_date + '~' + agentDetail.agency_stage_max + '个月'}}</p>
                  <p v-else>{{orderData.product_date ? orderData.product_date + '个月' : '无限期'}}</p>
                </div>
                <div class="inline"></div>
                <div class="detail-item">
                  <p>已付订金</p>
                  <p>{{agentDetail.deposit_paid ? agentDetail.deposit_paid +'元' : '-'}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="check-table">
        <div class="nav">
          <div :class="checkNav === 'detail' ? 'active' : ''" @click="handleCheck('detail')">详情</div>
          <div :class="checkNav === 'income' ? 'active' : ''" @click="handleCheck('income')">收入</div>
        </div>
        <div class="detail-content" v-show="checkNav === 'detail'">
          <div class="item">
            <div>总价值</div>
            <div>{{orderData.product_amount ? orderData.product_amount +'元' : '-'}}</div>
          </div>
          <div class="item">
            <div>单价</div>
            <div>
              {{orderData.product_price ? orderData.product_price : '-'}}
              <span
                v-show="orderData.product_unit"
              >元/{{orderData.product_unit}}</span>
            </div>
          </div>
          <div class="item">
            <div>总代理订金</div>
            <div>{{orderData.product_amount_deposit ? orderData.product_amount_deposit +'元' : '-'}}</div>
          </div>
          <div class="item">
            <div>总代理份数</div>
            <div>{{orderData.total_copies}}份</div>
          </div>
          <div class="item">
            <div>每份订金</div>
            <div>{{orderData.agent_each_copies_deposit ? orderData.agent_each_copies_deposit +'元/份' : '-'}}</div>
          </div>
          <div class="item">
            <div>规格属性</div>
            <div>{{orderData.product_sku ? orderData.product_sku : '-'}}</div>
          </div>
          <!-- <div class="item" v-show="agentDetail.contract_id">
            <div>代理合同</div>
            <div class="btn" @click="_previewContract(agentDetail.contract_id)">
              查看合同
              <van-icon class="icon" name="arrow" />
            </div>
          </div>-->
        </div>
        <div class="income-content" v-show="checkNav === 'income'">
          <div v-if="agentList.list" class="table">
            <div class="thead">
              <div class="tr">
                <div class="td">时间</div>
                <div class="td">说明</div>
                <div class="td">状态</div>
              </div>
            </div>
            <div class="tbody">
              <div class="tr content-tr" v-for="(item,index) in agentList.list" :key="index">
                <div class="td">
                  <span>{{item.date_time}}</span>
                </div>
                <div class="td msg-td">
                  <span>{{item.stock}}</span>
                </div>
                <div v-if="item.status_msg === '已收取'" class="td text-blue">
                  <span>{{item.status_msg}}</span>
                </div>
                <div v-else-if="item.status_msg === '待收取'" class="td text-origin">
                  <span>{{item.status_msg}}</span>
                </div>
                <div v-else class="td">
                  <span>{{item.status_msg}}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="table noTable">
            <p class="noTip">暂无数据</p>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import {
  getAgentOrder,
  getStoreDetail,
  getAgentDetail,
  getAgentList,
  getStockDetail,
} from "@/api/myagency";
import { previewContract } from "@/api/mycontract";
import { parseTime } from "@/utils";
import { Notify } from "vant";
export default {
  data() {
    return {
      loadingFlag: false,
      isRefresh: false,
      type: "",
      checkNav: "detail",
      reqParams: {
        order_id: "",
      },
      orderData: {},
      agentDetail: {},
      agentList: [],
      listParams: {
        order_id: "",
        p: 1,
        limit: 10,
      },
    };
  },
  created() {
    this.loadingFlag = true;
    this.reqParams.order_id = this.$route.query.id;
    this.listParams.order_id = this.$route.query.id;
    console.log(this.reqParams);
    this._getAgentOrder();
    this._getAgentDetail();
    this._getAgentList();
  },
  methods: {
    // 获取商品详情数据
    _getAgentOrder() {
      getAgentOrder(this.reqParams)
        .then((res) => {
          if (res.code == 1) {
            if (res.data.product_price.indexOf("¥") > -1) {
              res.data.product_price = res.data.product_price.slice(
                1,
                res.data.product_price.length
              );
            }
            this.orderData = res.data;
            console.log("商品详情", this.orderData);
          } else {
            console.log(res.msg);
          }
        })
        .finally(() => {
          this.isRefresh = false;
          this.loadingFlag = false;
        });
    },
    // 获取订单详情数据
    _getAgentDetail() {
      getAgentDetail(this.reqParams)
        .then((res) => {
          if (res.code == 1) {
            this.agentDetail = res.data;
            console.log("订单详情", this.agentDetail);
          } else {
            console.log(res.msg);
          }
        })
        .finally(() => {
          this.isRefresh = false;
          this.loadingFlag = false;
        });
    },
    // 获取代理订单详情收支列表
    _getAgentList() {
      getAgentList(this.listParams).then((res) => {
        if (res.code == 1) {
          this.agentList = res.data;
          console.log("收支列表", this.agentList);
        } else {
          console.log(res.msg);
        }
      });
    },
    // 下拉刷新
    onRefresh() {
      this._getAgentOrder();
      this._getAgentDetail();
      this._getAgentList();
    },
    // 切换栏目
    handleCheck(check) {
      this.checkNav = check;
    },
    // 查看合同
    _previewContract() {
      if (this.agentDetail.contract_id) {
        this.$toast.loading({
          duration: 0,
          message: "合同生成中",
          forbidClick: true,
          loadingType: "spinner",
        });
        let params = {
          contract_id: this.agentDetail.contract_id,
        };
        previewContract(params).then((res) => {
          console.log(res);
          if (res.code == 1 && res.data.url) {
            window.open(res.data.url, "_self");
            console.log(res.data.url);
            this.$toast.clear();
          } else {
            this.$message.error(res.msg || "请求失败");
            this.$toast.clear();
          }
        });
      } else {
        this.$toast.fail("合同未签署");
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.AgentDetailLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7f7f7;
  .header {
    margin-bottom: 20px;
    > .status {
      width: 100%;
      height: 190px;
      line-height: 190px;
      color: #fff;
      font-size: 36px;
      background: linear-gradient(
        108deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
      img {
        vertical-align: middle;
        margin-bottom: 8px;
        width: 40px;
        height: 40px;
        margin-right: 12px;
      }
    }
    > .time-code {
      width: 100%;
      padding: 40px 32px 0;
      margin-top: -20px;
      text-align: left;
      background: rgba(255, 255, 255, 1);
      border-radius: 20px 20px 0px 0px;
      > p {
        font-size: 28px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        padding-bottom: 40px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        > span {
          font-size: 28px;
          font-weight: 500;
          color: rgba(17, 17, 17, 1);
        }
        &.contract-p {
          text-align: right;
          .btn {
            font-size: 28px;
            font-weight: 400;
            color: rgba(56, 126, 255, 1) !important;
            > .icon {
              font-size: 30px;
              vertical-align: middle;
              margin-bottom: 6px;
            }
            &.no-btn{
              color: #ccc !important;
            }
          }
        }
      }
    }
  }

  .stores-info {
    margin-bottom: 20px;

    .item {
      margin-bottom: 20px;
      background-color: #fff;
      &:last-of-type {
        margin: 0;
      }
      > .item-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;

        > .title {
          font-size: 28px;
          font-weight: bolder;
          color: rgba(17, 17, 17, 1);
          > img {
            width: 90px;
            height: 30px;
            vertical-align: middle;
            margin-bottom: 2px;
            margin-right: 12px;
          }
        }
      }
      > .padding {
        padding: 30px 30px 20px;
      }
      > .item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 24px 42px;
        > .image {
          position: relative;
          width: 190px;
          height: 190px;
          background: rgba(238, 238, 238, 1);
          border-radius: 8px;
          > img {
            width: 100%;
            height: 100%;
          }
          > .mask {
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-content: center;
            width: 100%;
            height: 40px;
            line-height: 42px;
            background: rgba(254, 96, 24, 0.6);
            border-radius: 0px 0px 8px 8px;
            font-size: 22px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            > img {
              display: inline-block;
              width: 16px;
              height: 20px;
              margin-right: 8px;
              margin-top: 10px;
            }
          }
        }
        > .info {
          flex: 1;
          text-align: left;
          padding: 10px 20px;
          .title {
            display: flex;
            align-content: center;
            font-size: 26px;
            font-weight: 500;
            color: rgba(17, 17, 17, 1);
            margin-bottom: 26px;
            > span {
              display: block;
              height: 26px;
              line-height: 30px;
              text-align: center;
              margin-right: 8px;
              border: 2px solid rgba(254, 96, 24, 1);
              font-size: 20px;
              color: rgba(254, 96, 24, 1);
              border-radius: 4px;
              margin-top: -2px;
              font-weight: 500;
            }
          }
          .agent-num {
            font-size: 22px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-bottom: 34px;
          }
          .detail {
            display: flex;
            justify-content: space-between;
            align-content: center;

            > .detail-item {
              text-align: center;
              > p:nth-of-type(1) {
                font-size: 24px;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                margin-bottom: 10px;
              }
              > p:nth-of-type(2) {
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(17, 17, 17, 1);
              }
            }
            > .inline {
              width: 1px;
              height: 30px;
              margin-top: 16px;
              background: rgba(236, 236, 236, 1);
            }
          }
        }
      }
    }
  }

  .check-table {
    background-color: #fff;
    > .nav {
      display: flex;
      justify-content: space-around;
      align-content: center;
      > div {
        padding: 32px 0;
        font-size: 28px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      > .active {
        color: #fe6018;
        border-bottom: 4px solid #fe6018;
      }
    }
    > .detail-content {
      min-height: 650px;
      > .item {
        display: flex;
        justify-content: space-between;
        align-content: center;
        padding: 38px 40px 36px 40px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        > div:nth-of-type(2) {
          font-size: 28px;
          font-weight: 400;
          color: rgba(17, 17, 17, 1);
        }
        > .btn {
          font-size: 28px;
          font-weight: 400;
          color: rgba(56, 126, 255, 1) !important;
          > .icon {
            font-size: 30px;
            vertical-align: middle;
            margin-bottom: 6px;
          }
        }
      }
    }
    > .income-content {
      padding: 40px 30px 0;
      min-height: 650px;
      .table {
        &.noTable {
          min-height: 200px;
          .noTip {
            line-height: 150px;
            color: #999;
          }
        }

        > .thead,
        > .tbody {
          > .tr {
            display: flex;
            justify-content: space-around;
            align-content: center;
            width: 100%;
            height: 88px;
            line-height: 88px;
            font-size: 28px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            background: rgba(249, 249, 249, 1);
            &.content-tr {
              padding: 50px 0 45px 0;
              height: auto;
              line-height: 0;
              .td {
                position: relative;
                line-height: 40px;
                span {
                  position: absolute;
                  width: 100%;
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                }
                &.msg-td {
                  text-align: left;
                  span {
                    padding-left: 25px;
                  }
                }
              }
            }
            > .td {
              flex: 1;
            }
          }
        }
        > .tbody {
          > .tr {
            background-color: #fff;
            border-bottom: 1px solid #f2f2f2;
            color: rgba(17, 17, 17, 1);
            > .td:nth-of-type(3) {
              color: rgba(153, 153, 153, 1);
              &.text-blue {
                color: #387eff;
              }
              &.text-origin {
                color: #fe6018;
              }
            }
            &:last-of-type {
              border: none;
            }
          }
        }
      }
    }
  }
}
</style>
